<html>

	<head>
		<style>
			div {
				width: 100%;
				text-align: center;
				font-size: 20px;
				color: red;
				margin-top: 200px;
			}
		</style>
	</head>
	<div id="time">
	</div>
	<button type="button" onclick="start()">start</button>
	<button type="button" onclick="end()">end</button>
	<body>
		<script>
			let startTime = 0;
			let endTime = 0;
			let frame = 0;
			let d = 0;
			let h = 0;
			let m = 0;
			let s = 0;
			let ms = 0;

			function countTime() {

				date = new Date().getTime() - startTime.getTime()+endTime;
				d = Math.floor(date / 1000 / 60 / 60 / 24);
				h = Math.floor(date / 1000 / 60 / 60 % 24);
				m = Math.floor(date / 1000 / 60 % 60);
				s = Math.floor(date / 1000 % 60);
				ms = Math.floor(date % 1000);

				//将倒计时赋值到div中
				document.getElementById('time').innerHTML = "计时器：" + d + "天" + h + "时" + m + "分" + s + "秒" + ms + "毫秒";
				loop()
			}

			function loop() {
				frame = window.requestAnimationFrame(countTime);
			}

			function start() {
				startTime = new Date()
				countTime();
			}

			function end() {
				endTime  += new Date() - startTime;
				window.cancelAnimationFrame(frame)
			}
		</script>
	</body>

</html>

